<template>

  <div class="category">
    <transition name="van-fade">
      <div v-show="visible">
    <van-nav-bar title="书本分类" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="left">
        <p @click="getType(0)" :class="{ default: menuSty == 0 }">全部类型</p>
        <p
          v-for="item in newMenu"
          :key="item.id"
          @click="getType(item)"
          :class="{ default: menuSty == item.id }"
        >
          {{ item.type }}
        </p>
      </div>
      <div class="right">
          <h5>{{typeTitle}}</h5>
          <div class="son">
             <span
              v-for="val in children"
              :key="val.id"
              @click="getTypeid(val.id)"
              >{{ val.type }}</span
            >
          </div>
      </div>
    </div>
    </div>
     </transition>



    
    <Bottom></Bottom>
  </div>
     
</template>

<script>
// import { $get, $post } from "@/ajax";
import { mapMutations } from "vuex";
import Bottom from "../default/Bottom.vue";
export default {
  name: "Category",
  components: {
    Bottom,
  },
  data() {
    return {
      menu: [],
      newMenu: [],
      children: [], //子类型
      menuSty: 0, //样式加载
      typeTitle: "全部类型",
      visible:false,
      vis_right:false
    };
  },



  methods: {
    ...mapMutations("tabbar", ["tabId"]),
    onClickLeft() {
      this.$router.push("/");
      this.tabId(0);
    },

    getMenu(id, arr) {
      //判断
      if (id === 0) {
        this.menu.forEach((item) => {
          if (item.pid === 0) {
            arr.push(item);
          }
        });

        //在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二季菜单的筛选
        this.getMenu(this.newMenu[0].id, this.newMenu);
      } else {
        arr.forEach((item) => {
          this.menu.forEach((val) => {
            if (item.id === val.pid) {
              if (!item.children) item.children = [];
              item.children.push(val);
            }
          });
        });
      }
    },

    //获取父类型和子类型
    getTypemenu() {
      this.children = [];
      for (let i in this.menu) {
        if (this.menu[i].pid != 0) {
          this.children.push(this.menu[i]);
        }
      }
    },

    // getTypeid(typeid) {
    //   this.$router.push({
    //     path: "/mobile/booktype",
    //     query: {
    //       typeid: typeid,
    //     },
    //   });
    // },

        //获取类型
    getType(item) {
      
      this.menuSty = item.id;
      this.children = item.children;
      this.typeTitle = item.type;
      if (item == 0) {
        this.menuSty = 0;
        this.typeTitle = "全部类型";
        this.getTypemenu();
      }

    },
  },
  mounted() {},
  created() {
    this.axios
      .get(`/api/public/type/findAll2`)
      .then((res) => {
        if (res.status === 200) {
          this.menu = res.data.data;
          this.getMenu(0, this.newMenu);
          this.getTypemenu();
        }
      })
      .catch((error) => {
        console.log(error);
      });


      // setTimeout(() => {
      //    document.getElementById('body').style.visibility = "visible";
      // },100);

      setTimeout(() => {
        this.visible = true;
      }, 300);

     
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: initial;
  font-weight: normal;
}

:deep(.van-icon-arrow-left) {
  color: gray !important;
}



.content {
  width: 100%;
  height: auto;
  display: flex;
}

.content .left {
  width: 25%;
  height: 80vh;
  background-color: white;
}

.content .right {
  width: 75%;
  height: auto;
}

.right h5{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background-color: rgb(245, 248, 252);
  color: gray;
  text-align: center;
  font-size: 0.4rem;
}

.right .son{
  margin-top: 0.2rem;
  height: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: white;
}

.right .son span{ 
  width: 28%;
  display: inline-block;
  margin: 0.1rem 0.1rem;
  background-color: white;
  height: 0.7rem;
  text-align: center;
  line-height: 0.7rem;
  border-radius: 0.1rem;
  border: 1px solid ghostwhite;

}

.default {
  color: rgb(229, 62, 48);
  background-color: rgb(239, 244, 250);
}

.content .left p{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;

}
</style>
